$(document).ready(function() {
	
	//开场第一屏动画开始
	
	setTimeout(function() {
		
		$(".zss_title1").addClass("zss_scal");
		
		$('.zss_bito .p1').delay(500).animate({
			right: '0'
		}, 1200, 'easeOutExpo');
		
		$('.zss_bito .p2').delay(500).animate({
			left: '0'
		}, 1200, 'easeOutExpo');
		
	}, 300);
	
	//开场第一屏动画结束
	
	$(".dowebok").fullpage({

		slidesColor: ['#F4F4F6', 'white', '#FFFEF2', 'white', '#FFFEF2','red'],

		verticalCentered: true,

		anchors: ['page1', 'page2', 'page3', 'page4', 'page5','page6'],

		menu: '#zss_nav',

		//paddingTop: '3rem',

		scrollingSpeed: 600,

		easing: "easeOutCubic",

		navigation: true,

		css3: true,

		afterLoad: function(anchorLink, index) {
			
			if(index == '1') {

				$(".zss_title1").addClass("zss_scal");
		
				$('.zss_bito .p1').delay(500).animate({
					right: '0'
				}, 1200, 'easeOutExpo');
				
				$('.zss_bito .p2').delay(500).animate({
					left: '0'
				}, 1200, 'easeOutExpo');

			}

			
			if(index == 2) {

				$(".zss_hengline").addClass("helinadd")
				
				setTimeout(function(){
					$('.zss_twobox1').delay(200).animate({

						left: '0'
	
					}, 1400, 'easeOutExpo');
	
					$('.zss_twobox2').delay(200).animate({
	
						right: '0'
	
					}, 1400, 'easeOutExpo');
				},400)

			}

			if(index == 3) {

				$('.zss_se3box h3').animate({

					top: '0'

				}, 1000, 'easeOutExpo');
				
				$('.zss_se3box h5').delay(200).animate({

					top: '0'

				}, 1000, 'easeOutExpo');
				
				
				$('.zss_se3box img').css({"transform":"scale(1)","-webkit-transform":"scale(1)","-moz-transform":"scale(1)","-ms-transform":"scale(1)"})
				
				
			}

			if(index == 4) {
				
				$('.sec4img1,.sec4img2,.sec4img3').delay(200).animate({

					right: '0'

				}, 2000, 'easeOutExpo');
				
				
				setTimeout(function(){
					$('.zss_sec4textbox h4').css({"left":"0","transform":"scale(1)","-webkit-transform":"scale(1)","-moz-transform":"scale(1)","-ms-transform":"scale(1)"})
				},1000);
				
				$('.zss_sec4textbox').find('p').fadeIn(2000);

			}
			
			if(index == 5) {

				$('.section5').find('p').fadeIn(2000);
				
				$('.zss_vrbox h3').animate({
					
					right: '0'

				}, 1200, 'easeOutQuart');
				
				setTimeout(function(){
					$('.zss_vrbox .img1').css({"transform":"scale(1) rotate(720deg)","-webkit-transform":"scale(1) rotate(720deg)","-moz-transform":"scale(1) rotate(720deg)","-ms-transform":"scale(1) rotate(720deg)"})
				},800);
				
				setTimeout(function(){
					$('.zss_vrbox .img2').css({"transform":"scale(1) rotate(720deg)","-webkit-transform":"scale(1) rotate(720deg)","-moz-transform":"scale(1) rotate(720deg)","-ms-transform":"scale(1) rotate(720deg)"})
				},1000);
				
				setTimeout(function(){
					$('.zss_vrbox .img3').css({"transform":"scale(1) rotate(720deg)","-webkit-transform":"scale(1) rotate(720deg)","-moz-transform":"scale(1) rotate(720deg)","-ms-transform":"scale(1) rotate(720deg)"})
				},1200);

			}

			if(index == 6) {

				$(".zss_jybox").addClass("addzss_jybox");
				
				setTimeout(function(){
					$(".zss_jybox .p1,.zss_jybox .p3").animate({
					
						right: '0'
	
					}, 1000, 'easeOutQuart');
					$(".zss_jybox .p2").animate({
						
						left: '0'
	
					}, 1000, 'easeOutQuart');
				},800)
				
			}
		},

		onLeave: function(index, direction) {
			
			if(index == '1') {
				
				$(".zss_title1").removeClass("zss_scal");
				$('.zss_bito .p1').delay(600).animate({
					right: '120%'
				}, 1, 'easeOutExpo');
				
				$('.zss_bito .p2').delay(600).animate({
					left: '120%'
				}, 1, 'easeOutExpo');

			}

			if(index == '2') {

				$(".zss_hengline").removeClass("helinadd")
				
				setTimeout(function(){
					$('.zss_twobox1').delay(200).animate({

						left: '-300%'
	
					}, 1, 'easeOutExpo');
	
					$('.zss_twobox2').delay(200).animate({
	
						right: '-300%'
	
					}, 1, 'easeOutExpo');
				},600)
				

			}

			if(index == '3') {
				
				$('.zss_se3box h3').delay(300).animate({

					top: '100rem'

				}, 1000, 'easeOutExpo');
				
				
				$('.zss_se3box h5').delay(600).animate({

					top: '100rem'

				}, 1000, 'easeOutExpo');
				
				setTimeout(function(){
					$('.zss_se3box img').css({"transform":"scale(0)","-webkit-transform":"scale(0)","-moz-transform":"scale(0)","-ms-transform":"scale(0)"})
				},1500);

			}

			if(index == '4') {
				
				$('.sec4img1,.sec4img2,.sec4img3').delay(200).animate({

					right: '300rem'

				}, 500, 'easeOutExpo');
				
				
				setTimeout(function(){
					
					$('.zss_sec4textbox h4').css({"left":"20rem","transform":"scale(0)","-webkit-transform":"scale(0)","-moz-transform":"scale(0)","-ms-transform":"scale(0)"})
				
				},200);
				
				$('.zss_sec4textbox').find('p').fadeOut(2000);

			}
			
			if(index == '5') {

				$('.section5').find('p').fadeOut(2000);
				
				$('.zss_vrbox h3').animate({
					
					right: '120%'

				}, 1000, 'easeOutQuart');
				
				setTimeout(function(){
					$('.zss_vrbox .img1').css({"transform":"scale(0) rotate(0)","-webkit-transform":"scale(0) rotate(0)","-moz-transform":"scale(0) rotate(0)","-ms-transform":"scale(0) rotate(0)"})
				},800);
				
				setTimeout(function(){
					$('.zss_vrbox .img2').css({"transform":"scale(0) rotate(0)","-webkit-transform":"scale(0) rotate(0)","-moz-transform":"scale(0) rotate(0)","-ms-transform":"scale(0) rotate(0)"})
				},1000);
				
				setTimeout(function(){
					$('.zss_vrbox .img3').css({"transform":"scale(0) rotate(0)","-webkit-transform":"scale(0) rotate(0)","-moz-transform":"scale(0) rotate(0)","-ms-transform":"scale(0) rotate(0)"})
				},1200);

			}

			if(index == '6') {

				$(".zss_jybox").removeClass("addzss_jybox");
				
				setTimeout(function(){
					$(".zss_jybox .p1,.zss_jybox .p3").animate({
					
						right: '100rem'
	
					}, 1, 'easeOutQuart');
					$(".zss_jybox .p2").animate({
						
						left: '100rem'
	
					}, 1, 'easeOutQuart');
				},1000)

			}
		}

	});

	
	//	can
	var canvas = document.querySelector('canvas'),
		ctx = canvas.getContext('2d')
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	ctx.lineWidth = .3;
	ctx.strokeStyle = (new Color(150)).style;

	var mousePosition = {
		x: 30 * canvas.width / 100,
		y: 30 * canvas.height / 100
	};

	var dots = {
		nb: 150,
		distance: 50,
		d_radius: 100,
		array: []
	};

	function colorValue(min) {
		return Math.floor(Math.random() * 255 + min);
	}

	function createColorStyle(r, g, b) {
		return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
	}

	function mixComponents(comp1, weight1, comp2, weight2) {
		return(comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
	}

	function averageColorStyles(dot1, dot2) {
		var color1 = dot1.color,
			color2 = dot2.color;

		var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
			g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
			b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
		return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
	}

	function Color(min) {
		min = min || 0;
		this.r = colorValue(min);
		this.g = colorValue(min);
		this.b = colorValue(min);
		this.style = createColorStyle(this.r, this.g, this.b);
	}

	function Dot() {
		this.x = Math.random() * canvas.width;
		this.y = Math.random() * canvas.height;

		this.vx = -.5 + Math.random();
		this.vy = -.5 + Math.random();

		this.radius = Math.random() * 2;

		this.color = new Color();
		console.log(this);
	}

	Dot.prototype = {
		draw: function() {
			ctx.beginPath();
			ctx.fillStyle = this.color.style;
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
			ctx.fill();
		}
	};

	function createDots() {
		for(i = 0; i < dots.nb; i++) {
			dots.array.push(new Dot());
		}
	}

	function moveDots() {
		for(i = 0; i < dots.nb; i++) {

			var dot = dots.array[i];

			if(dot.y < 0 || dot.y > canvas.height) {
				dot.vx = dot.vx;
				dot.vy = -dot.vy;
			} else if(dot.x < 0 || dot.x > canvas.width) {
				dot.vx = -dot.vx;
				dot.vy = dot.vy;
			}
			dot.x += dot.vx;
			dot.y += dot.vy;
		}
	}

	function connectDots() {
		for(i = 0; i < dots.nb; i++) {
			for(j = 0; j < dots.nb; j++) {
				i_dot = dots.array[i];
				j_dot = dots.array[j];

				if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
					if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
						ctx.beginPath();
						ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
						ctx.moveTo(i_dot.x, i_dot.y);
						ctx.lineTo(j_dot.x, j_dot.y);
						ctx.stroke();
						ctx.closePath();
					}
				}
			}
		}
	}

	function drawDots() {
		for(i = 0; i < dots.nb; i++) {
			var dot = dots.array[i];
			dot.draw();
		}
	}

	function animateDots() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		moveDots();
		connectDots();
		drawDots();

		requestAnimationFrame(animateDots);
	}

	$('canvas').on('mousemove', function(e) {
		mousePosition.x = e.pageX;
		mousePosition.y = e.pageY;
	});

	$('canvas').on('mouseleave', function(e) {
		mousePosition.x = canvas.width / 2;
		mousePosition.y = canvas.height / 2;
	});

	createDots();
	requestAnimationFrame(animateDots);
	//	can

	
});